<script setup lang="ts">
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted, provide } from 'vue'
import DynamicMenu from '../components/DynamicMenu.vue'
import { clearUserPermissions } from '../utils/permission'
import {
  Clock,
  House,
  Document,
  Setting,
  Grid,
  Minus,
  User,
  PriceTag,
  CirclePlus,
  Aim,
  Link,
  Warning,
  Bell,
  Shop,
  UserFilled,
  Operation,
  Share,
  CircleClose,
  SwitchButton,
  Avatar,
  DataBoard,
  TrendCharts,
  Monitor,
  Connection,
  Tools,
  Management,
  Star,
  Moon,
  Sunny,
  Cloudy,
  HomeFilled,
  ChatDotRound,
  Finished,
  Tickets,
  Camera
} from '@element-plus/icons-vue'

const router = useRouter()

// ==================== 响应式数据 ====================
// 菜单状态管理
const activeIndex = ref('material-group')
const openMenus = ref(['basic-data', 'material-management', 'process-management', 'product-management', 'system-settings'])
const sidebarCollapsed = ref(false)

// 用户信息
const userInfo = ref({
  username: localStorage.getItem('userNickname') || '',
  role: localStorage.getItem('roleName') || '',
})

// 系统状态
const systemStatus = ref({
  onlineUsers: 156,
  activeOrders: 23,
  systemLoad: 68,
  lastUpdate: new Date().toLocaleTimeString(),
  weather: '灵气充沛',
  season: '春',
  timeOfDay: '午时',
  cultivationLevel: '筑基期'
})

// 动画控制
const animationEnabled = ref(true)
const particleCount = ref(25)
const spiritParticles = ref(18)
const cloudCount = ref(10)

// 动态菜单引用
const dynamicMenuRef = ref()

// 菜单刷新方法
const refreshMenu = () => {
  if (dynamicMenuRef.value && dynamicMenuRef.value.refreshMenu) {
    dynamicMenuRef.value.refreshMenu()
    console.log('菜单已刷新')
  }
}

// 提供菜单刷新方法给子组件
provide('refreshMenu', refreshMenu)

// ==================== 方法定义 ====================
/**
 * 处理菜单选择
 * 更新活动菜单项并添加动画效果
 */
const handleSelect = (key: string) => {
  activeIndex.value = key
  console.log('选择菜单:', key)

  // 添加选择动画效果
  if (animationEnabled.value) {
    // 可以在这里添加菜单选择的视觉反馈
  }
}

/**
 * 处理菜单展开
 * 管理子菜单的展开状态
 */
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('展开菜单:', key, keyPath)
  openMenus.value.push(key)
}

/**
 * 处理菜单收起
 * 管理子菜单的收起状态
 */
const handleClose = (key: string, keyPath: string[]) => {
  console.log('收起菜单:', key, keyPath)
  const index = openMenus.value.indexOf(key)
  if (index > -1) {
    openMenus.value.splice(index, 1)
  }
}

/**
 * 切换侧边栏折叠状态
 * 控制侧边栏的展开/收起
 */
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

/**
 * 处理用户退出登录
 * 清除本地存储并跳转到登录页
 */
const handleLogout = () => {
  // 清除本地存储的用户信息
  localStorage.removeItem('userNickname')
  localStorage.removeItem('roleName')
  localStorage.removeItem('rememberedUsername')
  localStorage.removeItem('token')
  
  // 清除用户权限数据
  clearUserPermissions()

  // 跳转到登录页面
  router.push("/")
}

/**
 * 获取粒子样式
 * 为背景粒子生成随机位置和动画参数
 */
const getParticleStyle = (index: number) => {
  const size = Math.random() * 3 + 1
  const left = Math.random() * 100
  const top = Math.random() * 100
  const animationDelay = Math.random() * 15
  const animationDuration = Math.random() * 20 + 15

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 获取灵气粒子样式
 * 为灵气效果生成样式
 */
const getSpiritParticleStyle = (index: number) => {
  const size = Math.random() * 2 + 1
  const left = Math.random() * 100
  const top = Math.random() * 100
  const animationDelay = Math.random() * 8
  const animationDuration = Math.random() * 12 + 8

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 获取云雾样式
 * 为云雾效果生成样式
 */
const getCloudStyle = (index: number) => {
  const size = Math.random() * 120 + 60
  const left = Math.random() * 120 - 10
  const top = Math.random() * 40 + 10
  const animationDelay = Math.random() * 10
  const animationDuration = Math.random() * 30 + 20

  return {
    left: `${left}%`,
    top: `${top}%`,
    width: `${size}px`,
    height: `${size * 0.6}px`,
    animationDelay: `${animationDelay}s`,
    animationDuration: `${animationDuration}s`
  }
}

/**
 * 获取连接线样式
 * 为菜单项之间的连接线生成样式
 */
const getConnectionStyle = (index: number) => {
  const length = Math.random() * 80 + 40
  const angle = Math.random() * 360
  const animationDelay = Math.random() * 8

  return {
    width: `${length}px`,
    transform: `rotate(${angle}deg)`,
    animationDelay: `${animationDelay}s`
  }
}

/**
 * 获取当前时辰
 * 根据时间返回古风时辰
 */
const getCurrentTimeOfDay = () => {
  const hour = new Date().getHours()
  const timeMap: { [key: number]: string } = {
    23: '子时', 0: '子时', 1: '丑时', 2: '丑时',
    3: '寅时', 4: '寅时', 5: '卯时', 6: '卯时',
    7: '辰时', 8: '辰时', 9: '巳时', 10: '巳时',
    11: '午时', 12: '午时', 13: '未时', 14: '未时',
    15: '申时', 16: '申时', 17: '酉时', 18: '酉时',
    19: '戌时', 20: '戌时', 21: '亥时', 22: '亥时'
  }
  return timeMap[hour] || '午时'
}

/**
 * 获取当前季节
 * 根据月份返回古风季节
 */
const getCurrentSeason = () => {
  const month = new Date().getMonth() + 1
  if (month >= 3 && month <= 5) return '春'
  if (month >= 6 && month <= 8) return '夏'
  if (month >= 9 && month <= 11) return '秋'
  return '冬'
}

// ==================== 生命周期 ====================
onMounted(() => {
  // 页面加载完成后的初始化操作
  console.log('沧元图MES管理系统主页面已加载')

  // 更新状态信息
  systemStatus.value.timeOfDay = getCurrentTimeOfDay()
  systemStatus.value.season = getCurrentSeason()

  // 启动动画效果
  setTimeout(() => {
    animationEnabled.value = true
  }, 1500)

  // 定时更新时辰
  setInterval(() => {
    systemStatus.value.timeOfDay = getCurrentTimeOfDay()
    systemStatus.value.lastUpdate = new Date().toLocaleTimeString()
  }, 60000) // 每分钟更新一次
})

onUnmounted(() => {
  // 页面卸载时的清理操作
  animationEnabled.value = false
})
</script>

<template>
  <div class="app-container">
    <!-- 古风背景 -->
    <div class="cangyuan-background">
      <!-- 山水背景 -->
      <div class="mountain-landscape">
        <div class="mountain-range"></div>
        <div class="mountain-peaks"></div>
        <div class="mountain-shadow"></div>
        <div class="waterfall"></div>
      </div>

      <!-- 云雾效果 -->
      <div class="clouds">
        <div class="cloud" v-for="n in cloudCount" :key="n" :style="getCloudStyle(n)"></div>
      </div>

      <!-- 粒子 -->
      <div class="cangyuan-particles">
        <div class="particle" v-for="n in particleCount" :key="n" :style="getParticleStyle(n)"></div>
      </div>

      <!-- 灵气效果 -->
      <div class="spirit-energy">
        <div class="spirit-particle" v-for="n in spiritParticles" :key="n" :style="getSpiritParticleStyle(n)"></div>
      </div>

      <!-- 连接线 -->
      <div class="cangyuan-connections">
        <div class="connection-line" v-for="n in 12" :key="n" :style="getConnectionStyle(n)"></div>
      </div>

      <!-- 装饰节点 -->
      <div class="cangyuan-nodes">
        <div class="node" :style="{ left: '15%', top: '25%' }">
          <div class="node-glow"></div>
        </div>
        <div class="node" :style="{ left: '35%', top: '45%' }">
          <div class="node-glow"></div>
        </div>
        <div class="node" :style="{ left: '55%', top: '35%' }">
          <div class="node-glow"></div>
        </div>
        <div class="node" :style="{ left: '75%', top: '55%' }">
          <div class="node-glow"></div>
        </div>
        <div class="node" :style="{ left: '85%', top: '30%' }">
          <div class="node-glow"></div>
        </div>
      </div>
    </div>

    <el-container class="main-layout-container">
      <!-- 左侧菜单 -->
      <el-aside :width="sidebarCollapsed ? '80px' : '300px'" class="cangyuan-sidebar"
        :class="{ 'collapsed': sidebarCollapsed }" router>
        <!-- Logo区域 -->
        <div class="cangyuan-logo-container">
          <div class="cangyuan-logo-icon" :class="{ 'collapsed': sidebarCollapsed }">
            <div class="cangyuan-icon">
              <div class="cangyuan-symbol"></div>
              <div class="cangyuan-circle"></div>
            </div>
            <div class="logo-glow"></div>
          </div>
          <transition name="fade">
            <div v-show="!sidebarCollapsed" class="cangyuan-logo-title">
              <h2>MES管理系统</h2>
            </div>
          </transition>
          <el-button class="cangyuan-collapse-btn" @click="toggleSidebar"
            :icon="sidebarCollapsed ? 'ArrowRight' : 'ArrowLeft'" circle size="small" />
        </div>

        <!-- 动态菜单区域 -->
        <DynamicMenu 
          ref="dynamicMenuRef"
          :sidebar-collapsed="sidebarCollapsed"
          @select="handleSelect"
          @open="handleOpen"
          @close="handleClose"
        />
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-container class="content-container">
        <!-- 部导航栏 -->
        <el-header class="cangyuan-header">
          <div class="cangyuan-header-content" style="float: right;">

            <div class="cangyuan-header-right">
              <div class="cangyuan-user-info">

                <div class="cangyuan-user-details">
                  <span class="cangyuan-username">{{ userInfo.username }}</span>
                  <span class="cangyuan-role">{{ userInfo.role }}</span>
                </div>

              </div>
              <el-button type="danger" size="small" @click="handleLogout" class="cangyuan-logout-btn">
                <el-icon>
                  <SwitchButton />
                </el-icon>
                退出登录
              </el-button>
            </div>
          </div>
        </el-header>

        <!-- 主内容区域 -->
        <el-main class="cangyuan-main-content">
          <div class="cangyuan-content-wrapper">
            <div class="cangyuan-content-border">
              <RouterView />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
/* ==================== 主容器样式 ==================== */
.app-container {
  position: relative;
  height: 100vh;
  background: linear-gradient(135deg,
      #1a1a2e 0%,
      #16213e 25%,
      #0f3460 50%,
      #533483 75%,
      #7209b7 100%);
  overflow: hidden;
  font-family: 'Microsoft YaHei', 'SimSun', serif;
  display: flex;
  flex-direction: column;
}

.main-layout-container {
  height: 100%;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ==================== 背景 ==================== */
.cangyuan-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 山水背景 */
.mountain-landscape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65%;
}

.mountain-range {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(139, 69, 19, 0.4) 30%,
      rgba(160, 82, 45, 0.5) 60%,
      rgba(101, 67, 33, 0.6) 100%);
  clip-path: polygon(0% 100%, 0% 60%, 20% 40%, 40% 50%, 60% 30%, 80% 45%, 100% 35%, 100% 100%);
  animation: cangyuanMountainGlow 8s ease-in-out infinite;
}

.mountain-peaks {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(255, 215, 0, 0.3) 20%,
      rgba(255, 140, 0, 0.4) 40%,
      rgba(255, 69, 0, 0.3) 60%,
      transparent 100%);
  clip-path: polygon(0% 100%, 0% 50%, 15% 35%, 35% 45%, 55% 25%, 75% 40%, 100% 30%, 100% 100%);
  animation: cangyuanPeakGlow 6s ease-in-out infinite;
}

.mountain-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0.5) 100%);
  clip-path: polygon(0% 100%, 0% 70%, 20% 50%, 40% 60%, 60% 40%, 80% 55%, 100% 45%, 100% 100%);
}

.waterfall {
  position: absolute;
  right: 15%;
  top: 20%;
  width: 4px;
  height: 40%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(200, 200, 255, 0.6) 50%,
      transparent 100%);
  border-radius: 2px;
  animation: cangyuanWaterfall 3s ease-in-out infinite;
}

/* 云雾效果 */
.clouds {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cloud {
  position: absolute;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4), transparent);
  border-radius: 50%;
  animation: cangyuanCloudFloat linear infinite;
}

/* 粒子 */
.cangyuan-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 1px, transparent 1px);
  border-radius: 50%;
  animation: cangyuanParticleFloat linear infinite;
}

/* 灵气效果 */
.spirit-energy {
  position: absolute;
  width: 100%;
  height: 100%;
}

.spirit-particle {
  position: absolute;
  background: linear-gradient(45deg, rgba(255, 215, 0, 0.9), rgba(255, 140, 0, 0.7));
  border-radius: 50%;
  animation: cangyuanSpiritFloat linear infinite;
}

/* 连接线 */
.cangyuan-connections {
  position: absolute;
  width: 100%;
  height: 100%;
}

.connection-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 215, 0, 0.7) 50%,
      transparent 100%);
  animation: cangyuanLineGlow 4s ease-in-out infinite;
}

/* 装饰节点 */
.cangyuan-nodes {
  position: absolute;
  width: 100%;
  height: 100%;
}

.node {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #ffd700, #ff8c00);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
  animation: cangyuanNodePulse 3s ease-in-out infinite;
}

.node-glow {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent);
  border-radius: 50%;
  animation: cangyuanNodeGlowPulse 2s ease-in-out infinite alternate;
}

.node:nth-child(1) {
  animation-delay: 0s;
}

.node:nth-child(2) {
  animation-delay: 0.6s;
}

.node:nth-child(3) {
  animation-delay: 1.2s;
}

.node:nth-child(4) {
  animation-delay: 1.8s;
}

.node:nth-child(5) {
  animation-delay: 2.4s;
}

/* ==================== 侧边栏样式 ==================== */
.cangyuan-sidebar {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg,
      rgba(139, 69, 19, 0.9) 0%,
      rgba(160, 82, 45, 0.95) 50%,
      rgba(101, 67, 33, 0.9) 100%);
  backdrop-filter: blur(15px);
  border-right: 2px solid rgba(255, 215, 0, 0.4);
  transition: all 0.3s ease;
  box-shadow:
    3px 0 25px rgba(0, 0, 0, 0.4),
    inset 0 0 60px rgba(255, 215, 0, 0.1);
}

.cangyuan-sidebar.collapsed {
  width: 80px !important;
}

.cangyuan-logo-container {
  display: flex;
  align-items: center;
  padding: 25px 20px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  margin-bottom: 15px;
  position: relative;
  background: linear-gradient(90deg,
      rgba(255, 215, 0, 0.1) 0%,
      transparent 50%,
      rgba(255, 140, 0, 0.1) 100%);
}

.cangyuan-logo-icon {
  position: relative;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
  transition: all 0.3s ease;
}

.cangyuan-logo-icon.collapsed {
  margin-right: 0;
}

.cangyuan-icon {
  position: relative;
  width: 30px;
  height: 30px;
}

.cangyuan-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #ffffff, #c0c0c0);
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.cangyuan-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.logo-glow {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-radius: 18px;
  opacity: 0.4;
  animation: cangyuanLogoGlow 3s ease-in-out infinite alternate;
  z-index: -1;
}

.cangyuan-logo-title h2 {
  color: #ffd700;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  font-family: 'Microsoft YaHei', serif;
}

.cangyuan-logo-title p {
  color: #ff8c00;
  font-size: 12px;
  margin: 2px 0 0 0;
  opacity: 0.8;
  font-family: 'SimSun', serif;
}

.cangyuan-collapse-btn {
  position: absolute;
  right: 15px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffd700;
  transition: all 0.3s ease;
}

.cangyuan-collapse-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* ==================== 菜单样式 ==================== */
.cangyuan-sidebar-menu {
  border: none;
  background-color: transparent;
}

.cangyuan-sidebar-menu :deep(.el-menu-item) {
  height: 55px;
  line-height: 55px;
  padding-left: 25px;
  color: #d4af37;
  background-color: transparent;
  border: none;
  margin: 4px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  font-family: 'Microsoft YaHei', serif;
  font-weight: 500;
}

.cangyuan-sidebar-menu :deep(.el-menu-item:hover) {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
  color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  transform: translateX(8px);
  border-left: 4px solid #ffd700;
}

.cangyuan-sidebar-menu :deep(.el-menu-item.is-active) {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 140, 0, 0.2));
  color: #ffd700;
  font-weight: 600;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
  border-left: 4px solid #ffd700;
}

.cangyuan-sidebar-menu :deep(.el-sub-menu__title) {
  height: 55px;
  line-height: 55px;
  padding-left: 25px;
  color: #d4af37;
  background-color: transparent;
  border: none;
  margin: 4px 15px;
  border-radius: 12px;
  transition: all 0.3s ease;
  font-family: 'Microsoft YaHei', serif;
  font-weight: 500;
}

.cangyuan-sidebar-menu :deep(.el-sub-menu__title:hover) {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
  color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  transform: translateX(8px);
  border-left: 4px solid #ffd700;
}

.cangyuan-sidebar-menu :deep(.el-sub-menu.is-active .el-sub-menu__title) {
  color: #ffd700;
}

.cangyuan-sidebar-menu :deep(.el-menu--inline .el-menu-item) {
  padding-left: 60px;
  margin: 3px 15px 3px 35px;
  border-radius: 10px;
}

.cangyuan-sidebar-menu :deep(.el-menu--inline .el-sub-menu__title) {
  padding-left: 60px;
  margin: 3px 15px 3px 35px;
  border-radius: 10px;
}

.cangyuan-menu-icon {
  margin-right: 15px;
  font-size: 20px;
  transition: all 0.3s ease;
}

.cangyuan-sidebar-menu :deep(.el-menu-item:hover) .cangyuan-menu-icon {
  transform: scale(1.15);
  color: #ffd700;
}

.active-menu-item {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 140, 0, 0.25)) !important;
  color: #ffd700 !important;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
  border-left: 4px solid #ffd700 !important;
}

/* ==================== 顶部导航栏样式 ==================== */
.cangyuan-header {
  position: relative;
  z-index: 10;
  background: linear-gradient(90deg,
      rgba(139, 69, 19, 0.95) 0%,
      rgba(160, 82, 45, 0.95) 50%,
      rgba(101, 67, 33, 0.95) 100%);
  backdrop-filter: blur(15px);
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  padding: 0;
  height: 80px;
  box-shadow: 0 3px 25px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  /* 防止header被压缩 */
}

.cangyuan-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 35px;
}

.cangyuan-header-left {
  display: flex;
  align-items: center;
}

.cangyuan-system-status {
  display: flex;
  gap: 20px;
}

.cangyuan-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.cangyuan-status-item:hover {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(255, 140, 0, 0.2));
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.cangyuan-status-icon {
  color: #ffd700;
  font-size: 16px;
}

.cangyuan-status-text {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Microsoft YaHei', serif;
}

.cangyuan-header-right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.cangyuan-user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 25px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 30px;
  transition: all 0.3s ease;
}

.cangyuan-user-info:hover {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(255, 140, 0, 0.2));
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
}

.cangyuan-user-avatar {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: white;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.cangyuan-user-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cangyuan-username {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Microsoft YaHei', serif;
}

.cangyuan-role {
  font-size: 12px;
  color: #ffd700;
  font-family: 'SimSun', serif;
}

.cangyuan-user-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cangyuan-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: cangyuanStatusPulse 2s ease-in-out infinite;
}

.cangyuan-status-indicator.online {
  background: #00ff00;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.7);
}

.cangyuan-logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: rgba(255, 68, 68, 0.15);
  border: 1px solid rgba(255, 68, 68, 0.4);
  color: #ff4444;
  transition: all 0.3s ease;
  font-family: 'Microsoft YaHei', serif;
}

.cangyuan-logout-btn:hover {
  background: rgba(255, 68, 68, 0.25);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
}

/* ==================== 主内容区域样式 ==================== */
.cangyuan-main-content {
  position: relative;
  z-index: 5;
  background: rgba(20, 20, 40, 0.8);
  backdrop-filter: blur(10px);
  padding: 0;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cangyuan-content-wrapper {
  height: 100%;
  padding: 25px;
  box-sizing: border-box;
  overflow: auto;
}

.cangyuan-content-border {
  height: 100%;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(248, 248, 255, 0.9) 100%);
  border-radius: 20px;
  border: 3px solid rgba(255, 215, 0, 0.3);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 215, 0, 0.2);
  overflow: auto;
  position: relative;
}

.cangyuan-content-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
      transparent 30%,
      rgba(255, 215, 0, 0.05) 50%,
      transparent 70%);
  pointer-events: none;
}

/* ==================== 动画定义 ==================== */
@keyframes cangyuanMountainGlow {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes cangyuanPeakGlow {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes cangyuanWaterfall {

  0%,
  100% {
    opacity: 0.8;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(5px);
  }
}

@keyframes cangyuanCloudFloat {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateX(calc(100vw + 100px));
    opacity: 0;
  }
}

@keyframes cangyuanParticleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes cangyuanSpiritFloat {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
    transform: translateY(80vh) rotate(72deg) scale(1);
  }

  80% {
    opacity: 0.9;
    transform: translateY(20vh) rotate(288deg) scale(1);
  }

  100% {
    transform: translateY(-100px) rotate(360deg) scale(0.5);
    opacity: 0;
  }
}

@keyframes cangyuanLineGlow {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes cangyuanNodePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

@keyframes cangyuanNodeGlowPulse {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes cangyuanLogoGlow {
  0% {
    opacity: 0.4;
  }

  100% {
    opacity: 0.8;
  }
}

@keyframes cangyuanStatusPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/* ==================== 过渡动画 ==================== */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1200px) {
  .cangyuan-system-status {
    gap: 15px;
  }

  .cangyuan-status-item {
    padding: 6px 12px;
  }

  .cangyuan-status-text {
    font-size: 11px;
  }
}

@media (max-width: 768px) {
  .cangyuan-sidebar {
    width: 80px !important;
  }

  .cangyuan-sidebar.collapsed {
    width: 60px !important;
  }

  .cangyuan-system-status {
    display: none;
  }

  .cangyuan-user-info {
    padding: 10px 15px;
  }

  .cangyuan-user-details {
    display: none;
  }

  .cangyuan-content-wrapper {
    padding: 15px;
  }

  .cangyuan-header-content {
    padding: 0 20px;
  }
}

@media (max-width: 480px) {
  .cangyuan-header-content {
    padding: 0 15px;
  }

  .cangyuan-header-right {
    gap: 15px;
  }

  .cangyuan-logout-btn {
    font-size: 12px;
    padding: 8px 15px;
  }

  .cangyuan-content-wrapper {
    padding: 10px;
  }

  .cangyuan-logo-container {
    padding: 20px 15px;
  }

  .cangyuan-logo-icon {
    width: 40px;
    height: 40px;
  }
}

/* ==================== 自定义滚动条 ==================== */
.cangyuan-sidebar::-webkit-scrollbar {
  width: 8px;
}

.cangyuan-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.cangyuan-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.4), rgba(255, 140, 0, 0.3));
  border-radius: 4px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.cangyuan-sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.6), rgba(255, 140, 0, 0.5));
}

/* 主内容区域滚动条样式 */
.cangyuan-content-wrapper::-webkit-scrollbar {
  width: 10px;
}

.cangyuan-content-wrapper::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.cangyuan-content-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.5), rgba(255, 140, 0, 0.4));
  border-radius: 5px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.cangyuan-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.7), rgba(255, 140, 0, 0.6));
}
</style>